<template>
  <!--    表格-->
  <div class="table_box">
    <el-table
      :data="listDate"
      :header-cell-style="{
        background: 'rgba(227,189,189,0.53)',
        border: 'none',
        color: '#000',
      }"
      border
      style="width: 100%"
    >
      <el-table-column label="ID" prop="commodityId" width="80">
      </el-table-column>
      <el-table-column label="修改时间" prop="updateTime" sortable width="160">
      </el-table-column>
      <el-table-column label="用户名" prop="userName" width="100">
      </el-table-column>
      <el-table-column label="商品名称" prop="productName" width="90">
      </el-table-column>
      <el-table-column label="商品图片" width="100">
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.image"
            :src="scope.row.image"
            class="product_img"
            fit="fill"
            lazy
          ></el-image>
          <span v-else>——</span>
        </template>
      </el-table-column>
      <el-table-column label="购买价格(元)" prop="price" sortable width="140">
      </el-table-column>
      <el-table-column label="原价(元)" prop="primeCost" sortable width="120">
      </el-table-column>
      <el-table-column
        label="可用量"
        prop="availableQuantity"
        sortable
        width="120"
      >
      </el-table-column>
      <el-table-column label="可/已使用授权额度" prop="authorizationLimit">
        <template slot-scope="scope">
          <span>
            <span class="orange_text">{{
              scope.row.authorizationLimit.available
            }}</span>
            /
            <span class="gray_text">{{
              scope.row.authorizationLimit.used
            }}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="110">
        <template slot-scope="scope">
          <span
            :class="scope.row.status === 0 ? 'orange_text' : 'green_text'"
            >{{ scope.row.status === 0 ? "审核中" : "已审核" }}</span
          >
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="230">
        <template slot-scope="scope">
          <div>
            <span class="blue_text operation_btn">详情</span>
            <span class="orange_text operation_btn">价格审核</span>
            <span class="blue_text operation_btn">设置额度</span>
          </div>
          <div>
            <span class="blue_text operation_btn">核销额度</span>
            <span
              class="orange_text operation_btn"
              @click="lookLog(scope.row.productName)"
              >查看日志</span
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: ["listDate"],
  methods: {
    lookLog(name) {
      this.$router.push({
        path: "/commodityRecord",
        query: { productName: name },
      });
    },
  },
};
</script>

<style scoped>
.table_box {
  margin-top: 20px;
}

.product_img {
  margin-top: 7px;
  width: 40px;
  height: 40px;
}

/*解决element表格固定列的下边框*/
/deep/ .el-table__fixed-right::before,
/deep/ .el-table__fixed::before {
  height: 0 !important;
  z-index: 0 !important;
}
</style>
